<template>

	<div class="app-container" v-loading="data.mtloading">


		<el-form :model="data.info" class="w-full mt-4" :label-width="language == 'en' ? '155' : '120px'">

			<el-form-item :label="$t('presets.assembly.identifier') + ':'" prop="plugin_name" class="w-1/2">
				<el-input v-model="data.info.plugin_name" :placeholder="$t('message.pleaseEnter')" />
			</el-form-item>

			<el-form-item :label="$t('presets.assembly.name') + ':'" prop="display_name" class="w-1/2">
				<div class="w-full">
					<draggable :list="data.mancelist" item-key="id" group="people">
						<template #item="item">
							<div class="border relative flex flex-wrap mb-4 p-2 rounded">
								<div class="w-5/12">
									<el-input v-model="item.element.value"
										:placeholder="$t('message.pleaseContents')" />
								</div>
								<div class="w-3/12 ml-4">
									<el-select v-model="item.element.lang" :placeholder="$t('message.pleaseSelect')"
										filterable @change="getlangarr" @focus="getlangfocus(item.element.lang)">
										<el-option v-for="item in data.langarr" :key="item.l_id"
											:label="item.name + '(' + item.value + ')'" :value="item.value"
											:disabled="item.disabled" />
									</el-select>
								</div>
								<div class="w-2/12 ml-2">
									<el-link v-if="item.index != 0" type="danger" :underline="false"
										@click="dels(item.index, item.element.lang)">{{ $t('public.del') }}</el-link>
								</div>
							</div>
						</template>
					</draggable>
				</div>
				<div class="w-full">
					<el-tag class="cursor-pointer" type="warning" size="large" effect="dark" @click="addmance">
						{{ $t('presets.assembly.addName') }}
					</el-tag>
				</div>
			</el-form-item>

			<el-form-item :label="$t('presets.assembly.identifier') + ':'" prop="type" class="w-1/2">
				<el-select v-model="data.info.type" :placeholder="$t('message.pleaseSelect')" filterable>
					<el-option v-for="item in data.typearr" :key="item.value" :label="item.label" :value="item.value" />
				</el-select>
			</el-form-item>

			<el-form-item :label="$t('presets.assembly.auxiliaryInfo') + ':'" prop="fields" class="w-1/2">
				<div class="w-full">
					<draggable :list="data.subsidiary" item-key="id" group="people">
						<template #item="item">
							<div class="border relative flex flex-wrap mb-4 p-2 rounded">
								<div class="w-2/12">
									<el-input v-model="item.element.name" placeholder="key" />
								</div>
								<div class="w-7/12 ml-4">
									<el-input v-model="item.element.value" placeholder="value" />
								</div>
								<div class="w-2/12 ml-2">
									<el-link v-if="item.index != 0" type="danger" :underline="false"
										@click="deldiary(item.index)">{{ $t('public.del') }}</el-link>
								</div>
							</div>
						</template>
					</draggable>
				</div>
				<div class="text-[#f56c6c] w-full">
					{{ $t('presets.assembly.content') }}
					<span class="ml-4">{{ $t('presets.assembly.standard') }}：name:{{ $t('presets.assembly.Imname')
						}}</span>
					<span class="ml-4">{{ $t('presets.assembly.object') }}：name:{ obj:{{ $t('presets.assembly.Imobject')
						}} }</span>
					<span class="ml-4">{{ $t('presets.assembly.array') }}：name:[ { arr:{{ $t('presets.assembly.Imarray')
						}} }
						]</span>
				</div>
				<div class="w-full">
					<el-tag class="cursor-pointer" type="warning" size="large" effect="dark" @click="adddiary">
						{{ $t('presets.assembly.addName') }}
					</el-tag>
				</div>
			</el-form-item>

			<div class="w-1/2 text-center mt-4 ml-6">
				<div class="inline-block">
					<el-button type="primary" @click="submit">{{ $t('public.save') }}</el-button>
					<el-button @click="cancell">{{ $t('public.cancel') }}</el-button>
				</div>
			</div>

		</el-form>

	</div>
</template>

<script lang="ts" setup>
import { useI18n } from 'vue-i18n'
const { t: $t } = useI18n()
import draggable from "vuedraggable";
import { updateplugins } from '@/api/presets';
import { getlang } from '@/api/manage';
import { useRouter, useRoute } from "vue-router";
import { onMounted } from 'vue'
let language = ref()
const { locale } = useI18n()
onMounted(() => {
	language.value = locale.value
})
const router = useRouter()
const route = useRoute()

let data = reactive({
	mtloading: false, // 加载
	langname: '', // 上次选中的语言
	mancelist: [], // 插件名称
	langarr: [], // 语言列表
	typearr: [ // 插件类型
	{ label: $t('mock.advertisement'), value: 1 },
		{ label: 'logo', value: 2 },
		{ label: $t('presets.assembly.Backendbut'), value: 3 },
		{ label: $t('presets.assembly.buyBut'), value: 4 },
		{ label: $t('presets.assembly.HelpBut'), value: 5 },
		{ label: $t('presets.assembly.codeBut'), value: 6 },
		{ label: $t('presets.assembly.gameBut'), value: 7 },
		{ label: $t('public.picture'), value: 8 },
		{ label: $t('presets.assembly.switchLang'), value: 9 },
		{ label: $t('presets.assembly.Store'), value: 10 },
		{ label: $t('presets.assembly.H5Display'), value: 11 },
		{ label: $t('presets.assembly.Purchase'), value: 12 }
	],
	subsidiary: [], // 附加信息
	info: {}, // 主体信息
})

// 获取接口信息
let geturlinfo = () => {
	data.mtloading = true
	data.langarr = []
	// 获取语言列表
	getlang().then(res => {
		if (res.state == 200) {
			for (let item of res.data) {
				data.langarr.push({
					l_id: item.l_id,
					name: item.name,
					value: item.lang,
					disabled: false
				})
			}
			getinfo()
		}
	})
}
// 取消
let cancell = () => {
	getinfo()
	router.back()
}
// 获取信息
let getinfo = () => {
	data.info = JSON.parse(decodeURI(route.query.l)).info
	let lang = JSON.parse(data.info.display_name)
	let fields = JSON.parse(data.info.fields)[0]
	let num = 0
	data.mancelist = []
	data.subsidiary = []

	for (let key in lang) {
		num++
		data.mancelist.push({
			id: new Date().getTime() + num,
			value: lang[key],
			lang: key
		})

		for (let item of data.langarr) {
			if (item.value == key) {
				item.disabled = true
			}
		}
	}

	for (let key in fields) {
		num++
		data.subsidiary.push({
			id: new Date().getTime() + num,
			name: key,
			value: fields[key]
		})
	}

	data.mtloading = false

}

// 添加插件名称
let addmance = () => {
	let value = ''
	for (let item of data.langarr) {
		if (item.disabled == false) {
			value = item.value
			item.disabled = true
			// 因空的id会导致拖动时产生BUG
			// 因此添加自定义性能时，采用时间戳当cp_id
			// 如有更优方案可代替时间戳，欢迎修改调整
			// DKM 启上
			data.mancelist.push({
				id: new Date().getTime(),
				value: '',
				lang: value
			})
			return
		}
	}
}

// 选中语言
let getlangarr = (e) => {
	for (let item of data.langarr) {
		if (item.value == e) {
			item.disabled = true
		}
		if (item.value == data.langname) {
			item.disabled = false
		}
	}
	data.langname = ''
}

// 获取当前语言
let getlangfocus = (e) => {
	data.langname = e
}

// 删除插件名称
let dels = (e, k) => {
	for (let item of data.langarr) {
		if (item.value == k) {
			item.disabled = false
		}
	}
	data.mancelist.splice(e, 1)
}

// 添加附加信息
let adddiary = () => {
	// 因空的id会导致拖动时产生BUG
	// 因此添加自定义性能时，采用时间戳当cp_id
	// 如有更优方案可代替时间戳，欢迎修改调整
	// DKM 启上
	data.subsidiary.push({
		id: new Date().getTime(),
		name: '',
		value: '',
	})
}

// 删除附加信息
let deldiary = (e) => {
	data.subsidiary.splice(e, 1)
}

// 保存
let submit = () => {
	let lname = {}
	let lstatus = true
	let diary = {}
	let dstatus = true
	let names = data.subsidiary.map(item => item["name"])
	let nameSet = new Set(names)

	if (data.info.plugin_name == '') {
		ElMessage({
			message: $t('message.pleaseEnterIdentifier'),
			type: 'error'
		})
		return
	}

	for (let item of data.mancelist) {
		if (item.value != '') {
			lname[item.lang] = item.value
			lstatus = false
		}
	}

	if (lstatus) {
		ElMessage({
			message: $t('message.pleaseEnterPluginName'),
			type: 'error'
		})
		return
	}



	if (nameSet.size != names.length) {
		ElMessage({
			message: $t('message.pleaseunkey'),
			type: 'error'
		})
		return
	}

	for (let item of data.subsidiary) {
		if (item.name != '' && item.value != '') {
			diary[item.name] = item.value
			dstatus = false
		}
	}

	if (dstatus) {
		ElMessage({
			message: $t('message.pleaseEnterAddInfo'),
			type: 'error'
		})
		return
	}

	let obj = {
		id: data.info.id,
		plugin_name: data.info.plugin_name,
		display_name: JSON.stringify(lname),
		type: data.info.type,
		fields: JSON.stringify([diary])
	}

	data.mtloading = true
	updateplugins(obj).then(res => {
		data.mtloading = false
		if (res.state == 200) {
			ElMessage({
				message: $t('message.modify'),
				type: 'success'
			})
			router.back()
			return
		}
		ElMessage({
			message: $t('message.networkFailed'),
			type: 'error'
		})
	})

}

geturlinfo()


</script>
